<template>
	<view>
		<view class="live-card">
			<!-- 缩略图部分 -->
			<view class="live-card__img-box">
				<img :src="data.imgUrl" alt="直播横向缩略图" class="live-card__img" />
				<!-- 观看次数 -->
				<view class="live-card__views-box">
					<text class="live-card__views">{{data.views}}</text>
				</view>
			</view>
			
			<!-- 对直播的介绍部分 -->
			<view class="live-card__desc">
				<view class="live-card__title">{{data.title}}</view>
				<!-- 附加信息，元信息，这里用来表示时间和类别 -->
				<view class="live-card__meta">
					<text class="live-card__date">时间：{{data.date}}</text>
					<text class="live-card__type">类别：{{data.type}}</text>
				</view>
				
				<!-- 主播信息 -->
				<view class="live-card__host">
					<view class="live-card__name">{{data.name}}</view>
					<view class="live-card__status">{{data.status}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// import {defineProps} from 'vue'

const props = defineProps({
	data:Object
})
</script>

<style lang="scss" scoped>
.live-card{
	width: 100%;
	height: 300rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #fff;
	
	&__img-box{
		width: 200rpx;
		height: 250rpx;
		position: relative;
	}
	
	&__img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	&__views-box{
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: rgba(0,0,0,.2);
		color:#fff;
		font-size: 32rpx;
		box-sizing: border-box;
		padding: .3em .2em;
	}
	
	&__desc{
		width: 500rpx;
		color: #333;
	}
	
	// 标题
	&__title{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		height: 100rpx;
		font-size: 36rpx;
		margin-bottom: .5em;
	}
	
	&__meta{
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		margin-bottom: .5em;
	}
	
	&__host{
		display: flex;
		font-size: 32rpx;
	}
	
	&__name{
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>